<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			img{
				height: 100px;
				width: 50px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
			<table border="">
				<tr v-for="(stu,i) in stus">
					<td>
					{{stu.id}}
					</td>
					<td>
					{{stu.name}}
					</td>
					
					<td>
					{{stu.price}}
					</td>
					<td>
					<img v-bind:src="stu.imgSrc"  />
					</td>
					<td>
					{{stu.kc}}
					</td>
					<td>
						<button @click="del(i)">删除</button>
					</td>
				</tr>
			</table>
			商品编号:<input type="text" v-model="id" /><br />
			商品名称:<input type="text" v-model="name" /><br />
			商品价格:<input type="text"  v-model="price" /><br />
			图片地址:<input type="text"  v-model="imgSrc" /><br />
			商品库存:<input type="text"  v-model="kc" /><br />
			<button @click="add">添加</button>
		</div>
		
		<script>			
			
			var app = Vue.createApp({
				data(){
					return {
						id:'',
						name:'',
						price:'',
						imgSrc:'',
						kc:'',
						
						stus:[
							{
								id:1,
								name:"iphone 14",
								price:"8888",
								imgSrc:"https://img2.baidu.com/it/u=3361214672,2866258594&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067" ,
								kc:3
							},
							{
								id:2,
								name:"华为mate40",
								price:"8888",
								imgSrc:"https://q0.itc.cn/images01/20240327/4377f2b8a8904c08a877d7786c75b1da.jpeg",
								kc:5
							}
						]
					}	
				},
				methods:{
					add:function(){
						this.stus.push({
						id:this.id,
						name:this.name,
						imgSrc:this.imgSrc,
						price:this.price,
						kc:this.kc
						})
					},
					del:function(i)
					{
						this.stus.splice(i,1)
					}
				}
			});
		
			var vm = app.mount("#app")
		</script>
	</body>
</html>